<template>
  <div>
    <ShareCard :loading="isLoading" :cardData="cardData" :showTitle="showTitle">
      <template #title>
        <div @click="handleGo">
          <Icon v-if="icon" :icon="icon" :size="16" class="mr-2" />{{ header }}</div
        >
      </template>
      <template v-if="dataSource?.length > 0">
        <div
          v-for="item in dataSource"
          :key="item.id"
          class="flex justify-between textHoverColor mb-14px"
        >
          <div
            class="overflow-hidden whitespace-nowrap overflow-ellipsis w-2/3 cursor-pointer"
            @click="handleView(item)"
          >
            <Tooltip :title="item.title">
              <div class="flex gap-1 items-center">
                <div
                  :style="[
                    {
                      width: '3px',
                      height: '3px',
                      borderRadius: '50%',
                      backgroundColor: item.color ? item.color : '#3C404E',
                    },
                  ]"
                  class="left_dot"
                >
                </div>
                <span
                  :class="item.isBold == 1 ? 'font-bold' : ''"
                  :style="[
                    {
                      color:
                        item.color == '#000000' || item.color == 'rgb(0, 0, 0)'
                          ? '#293771'
                          : item.color
                          ? item.color
                          : '#293771',
                      fontSize: '16px',
                    },
                  ]"
                  class="left"
                >
                  {{ item.title }}
                </span>
              </div>
            </Tooltip>
          </div>
          <div
            class="overflow-hidden whitespace-nowrap overflow-ellipsis w-1/3 text-right"
            v-if="item.createDate"
          >
            <Tooltip :title="item.createDate">
              <span
                class="right"
                :style="[
                  {
                    color:
                      item.color == '#000000' || item.color == 'rgb(0, 0, 0)'
                        ? '#293771'
                        : item.color
                        ? item.color
                        : '#293771',
                    fontSize: '16px',
                  },
                ]"
                >{{ item.createDate.substring(0, 10) }}</span
              >
            </Tooltip>
          </div>
        </div>
      </template>
      <template v-else>
        <Empty :image="simpleImage" />
      </template>
      <NoticeInfoDrawer @register="registerInfoDrawer" />
    </ShareCard>
  </div>
  <SmartModuleDrawer @register="registerSmartModuleDrawer" @edit-action="handleOpenEditDrawer" />
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { Empty, Tooltip } from 'ant-design-vue';
  import { getNoticeListSmart } from '/@/api/administration/administration';
  import { useGo } from '/@/hooks/web/usePage';
  import Icon from '/@/components/Icon/index';
  import { useDrawer } from '/@/components/Drawer';
  import NoticeInfoDrawer from '/@/views/pages/administrativeManagement/notice/noticeInfoDrawer.vue';
  import ShareCard from './ShareCard.vue';
  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;

  const props = defineProps({
    loading: Boolean,
    header: {
      type: String as PropType<string>,
      default: '',
    },
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '300px',
    },
    icon: {
      type: String as PropType<string>,
      default: '',
    },
    pageSize: {
      type: Number,
      default: 6,
    },
    cardData: {
      type: Object as PropType<object>,
      default: () => {
        return {};
      },
    },
    showTitle: {
      type: Boolean,
      default: true,
    },
  });

  const [registerSmartModuleDrawer, { openDrawer }] = useDrawer();

  const isLoading = ref(false);
  const dataSource = ref<Recordable>([]);
  const fetch = () => {
    isLoading.value = true;
    getNoticeListSmart({ pageSize: props.pageSize })
      .then((res) => {
        dataSource.value = res || [];
      })
      .finally(() => {
        isLoading.value = false;
      });
  };

  watch(
    () => props.pageSize,
    () => {
      fetch();
    },
    {
      immediate: true,
    },
  );
  const go = useGo();
  const moduleCode = '17184995529796789195';
  const handleGo = () => {
    go({
      path: '/smartModulePage',
      query: {
        moduleCode: moduleCode,
      },
    });
  };
  const [registerInfoDrawer, { openDrawer: openInfoDrawer }] = useDrawer();

  const handleView = (record: any) => {
    let params = {
      moduleCode: moduleCode,
      id: record.id,
      visitKey: '',
    };
    openDrawer(true, {
      isUpdate: 3,
      record: {
        ...params,
      },
    });
  };

  function handleOpenEditDrawer(record: object) {
    console.log('handleOpenEditDrawer record', record);
    openDrawer(true, {
      isUpdate: 2,
      record: {
        moduleCode: moduleCode,
        id: record['id'],
      },
    });
  }
</script>
<style lang="less" scoped>
  @import './comps.less';
</style>
